<template>
    <fieldset>
        <legend>购物车</legend>
        <h1>购物车:cart</h1>
        <ul>
            <li v-for="item in this.cartData" :key="item.id">
                <b>
                产品:{{ item.title }}
                </b>
                ----
                <b>
                价格:{{ item.price }}
                </b>
                ----
                <b>
                数量:{{ item.count }}
                </b>
                ----
                <button  @click="remove(item)">-</button>
            </li>
        </ul>
        <h1>
            总价：{{total}}
        </h1>
    </fieldset>
</template>

<script>
import {mapState,mapGetters,mapActions} from "vuex"
export default {
    computed:{
        ...mapState('cart',['cartData']),
        ...mapGetters('cart',['total'])
    },
    methods:{
        ...mapActions('cart',['REMOVE_CART']),
        remove(item){
            this.REMOVE_CART(item)
        }
    }
}
</script>














